<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title>messing around</title>
        <script type="text/javascript" src="../protovis-d3.2.js"></script>
        <script type="text/javascript" src="percent proficient 1998-2010.js"></script>
        <style type="text/css">
            #statBoxDiv { width: 300, height: 160 }
            #gradeYearPlotDiv { width: 500, height: 460 }
            #timeSeriesDiv { width: 1000, height: 400 }
        </style>
    </head>        
    <body>
    <table>
        <tr><td>
        <div id="statBoxDiv">
            <script type="text/javascript+protovis">


var statBox = new pv.Panel()
    .width(300)
    .height(160);

var bar = statBox.add(pv.Bar)
    .data(field)
    .fillStyle('seashell')
    .strokeStyle('lightgray')
    .top( function() this.index * 40 )
    .height(40);

    bar.anchor('top')
    .add(pv.Label)
    .font('14px sans-serif')
    .textStyle('green')
    .text( function(f) f );

    bar.anchor('bottom')
    .add(pv.Label)
    .font('12px sans-serif')
    .text( function() {
              var col = this.index;
              var count = 0;
              for (row in table) 
                 if (table[row][col] !== null) count++;
              return 'N = ' + count;
           });

    bar.anchor('left')
    .add(pv.Label)
    .font('12px sans-serif')
    .text( function() {
              var col = this.index;
              return pv.min(table, function(row) row[col]);
           });

    bar.anchor('right')
    .add(pv.Label)
    .font('12px sans-serif')
    .text( function() {
              var col = this.index;
              return pv.max(table, function(row) row[col]);
           });

    statBox.render();

</script>
    </div>
    </td><td>
    <div id="gradeYearPlotDiv">
<script type="text/javascript+protovis">


var grades = pv.uniq(table, function(r) r[column.grade] ).sort(pv.naturalOrder);
var years = pv.uniq(table, function(r) r[column.year] ).sort();

var grade_y = pv.Scale.ordinal()
    .domain(grades)
    .split(0, 400);
var year_x = pv.Scale.ordinal()
    .domain(years)
    .split(0, 400);

var gradeYearPlot = new pv.Panel()
    .width(400)
    .height(400)
    .top(60)
    .left(60);

gradeYearPlot.add(pv.Rule)
    .data(grades)
    .top(function(g) grade_y(g) )
    .strokeStyle('navajowhite')
    .lineWidth(20)
    .anchor('left').add(pv.Label)
    .text(function(g) g)
    .font('12px sans-serif');

gradeYearPlot.add(pv.Rule)
    .data(years)
    .left(function(y) year_x(y) )
    .strokeStyle(pv.color("peru"))
    .lineWidth(18)
    .anchor('top').add(pv.Label)
    .textAngle(-Math.PI / 4)
    .textAlign('left')
    .text(function(y) y )
    .font('12px sans-serif');

gradeYearPlot.anchor('left').add(pv.Label)
    .text('grade')
    .font('12px sans-serif')
    .textAlign('center')
    .textAngle(-Math.PI / 2)
    .left(-30);

gradeYearPlot.add(pv.Dot)
    .data(table)
    .shape('bar')
    .strokeStyle('navajowhite')
    .lineWidth(20)
    .angle(Math.PI / 2)
    .left(function(tbl) year_x(tbl[column.year]))
    .top(function(tbl) grade_y(tbl[column.grade]));

gradeYearPlot.render();


    </script>
</div>
</td></tr>
</table>
<div id="timeSeriesDiv">
    <script type="text/javascript+protovis">


var timeSeries_data = table.filter(function(row) row[column.grade] == 8)

var timeSeries_w = 1000;
var timeSeries_h = 400;

var timeSeries = new pv.Panel()
    .width(timeSeries_w)
    .height(timeSeries_h);

timeSeries.add(pv.Rule)
    .top(0)
    .root.add(pv.Rule)
    .left(0);

var timeSeries_y = new pv.Scale.linear()
    .domain(0, 100)
    .range(0, timeSeries_h);
var timeSeries_x = new pv.Scale.ordinal()
    .domain(years)
    .split(0, timeSeries_w);

timeSeries.add(pv.Panel)
    .data([timeSeries_data, timeSeries_data])

    .add(pv.Area)
    .data(function(d) d[this.index])
    .bottom(0)
    .height(function(d) timeSeries_y(d[this.index ? column.pmath : column.pela]))
    .left(function(d) timeSeries_x(d[column.year]))
    ;

timeSeries.render();


    </script>
</div>

    </body>
</html>
